<template>
  <view class="console-top-select-box">
    <view
      v-for="(item, index) in config"
      :key="index"
      :class="{active:index==activeIndex}"
      class="select-box-item"
      @click="handleChangeDateRange(index)"
    >
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0
    };
  },
  computed: {
    config() {
      let nowTime = this.$day().format("YYYY-MM-DD HH:mm:ss");
      let nowDay = this.$day().format("YYYY-MM-DD");
      return [
        {
          name: "当日",
          startTime: `${nowDay} 00:00:00`,
          endTime: nowTime
        },
        {
          name: "近7天",
          startTime:
            this.$day()
              .subtract(6, "days")
              .format("YYYY-MM-DD") + " 00:00:00",
          endTime: nowTime
        },
        {
          name: "近30天",
          startTime:
            this.$day()
              .subtract(29, "days")
              .format("YYYY-MM-DD") + " 00:00:00",
          endTime: nowTime
        }
      ];
    }
  },
  created() {
    this.handleChangeDateRange(this.activeIndex);
  },
  methods: {
    handleChangeDateRange(index) {
      this.activeIndex = index;
      this.$emit("change", this.config[index]);
    }
  }
};
</script>

<style scoped lang="scss">
$height: 55rpx;
$item-width: 130rpx;
.console-top-select-box {
  box-sizing: border-box;
  overflow: hidden;
  width: $item-width * 3;
  height: $height;
  line-height: $height;
  display: flex;
  border: 1px solid #ffffff;
  border-radius: $height;
  color: #ffffff;
  .select-box-item {
    width: $item-width;
    text-align: center;
    &.active {
      background: #ffffff;
      color: $activeColor;
    }
  }
}
</style>
